
import React from 'react';
import * as THREE from 'three';
import { Form, InputNumber } from 'antd';
import styles from './index.module.less';
import Controller from 'Controller';
import ColorInput from 'components/ColorInput';

/** 场景参数 */
export default function SceneParameters() {

    const [form] = Form.useForm()

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const version = threeController.useMemo(s => s.version, [])

    const floor = threeController.useMemo(s => s.floor, [])

    const onValuesChange = React.useCallback((_, values) => {
        if (!floor) return;
        floor.geometry = new THREE.PlaneGeometry(values.floorSize, values.floorSize);
        (floor.material as THREE.MeshPhongMaterial).color = new THREE.Color(values.floorColor);
    }, [floor])

    React.useEffect(() => {
        if (!floor) return;
        form.setFieldsValue({
            floorSize: floor.geometry.parameters.width,
            floorColor: (floor.material as THREE.MeshPhongMaterial).color.getHex()
        });
    }, [version, floor, form])

    return (
        <div className={styles.sceneParameters} >
            <Form form={form} layout="vertical" onValuesChange={onValuesChange} >
                <Form.Item label="地面大小" name='floorSize' >
                    <InputNumber style={{ width: '100%' }} />
                </Form.Item>

                <Form.Item label="地面颜色" name='floorColor'>
                    <ColorInput/>
                </Form.Item>
            </Form>
        </div>
    )
}